{include file="public/header"}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>任务管理</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />
    <style>
        html,body {
            width: 100%;
            background:rgba(238,238,238,1);
        }

        .container{
            padding-top:30px;
            padding-bottom:94px;
        }


        .box{
            width:1200px;
            height:auto;
            margin: 0 auto;
            padding-bottom:10px;
            background-color:#FFFFFF;
        }

        .box_1{
            padding-left:30px;
            padding-right:30px;
            height: 66px;
        }


        table{
            width:100%;
            padding-left:30px;
            padding-right:30px;
            text-align:left;
            border-spacing:0;
            color:#666666;
            font-size:12px;
        }

        th{
            max-width:50px;
            height:50px;
            line-height:20px;
            background-color:#F7F7F7;
            word-wrap:break-word;
            /*padding-left: 2px;*/
            /*padding-right: 2px;*/
        }
        th:nth-child(1){
            padding-left:30px;
        }
        th:nth-child(13){
            max-width:90px;
        }

        td{
            max-width:50px;
            height:50px;
            line-height:20px;
            border-bottom:1px solid #E9E9E9;
            word-wrap:break-word;
        }
        td:nth-child(1){
            padding-left:30px;
        }

        td:nth-child(13){
            max-width:90px;
        }

        .name111{
            width:24px;
            font-size:12px;
            font-weight:400;
            color:rgba(0,101,240,1);
            margin-right:7px;
            cursor: pointer;
        }

        .xia{

            font-weight:600;
            color:rgba(51,51,51,1);

        }


        .pagination{
            /*height: 28px !important;*/
            /*line-height:28px;*/
            /*margin-top:30px;*/
            /*padding-right:33px;*/
            color:#999;
            font-size:12px;
        }
        .pagination div{
            margin-left:5px;
            margin-right:5px;
        }
        .pagination div:nth-child(2){
            margin-right:15px;
        }
        .pagination div:nth-child(6){
            color:#282828;
        }
        .pagination div:nth-child(8){
            margin-left:15px;
        }
        .borderr{
            height:28px;
            width:28px;
            text-align:center;
            border-radius:2px;
            border:1px solid #F2F2F2;
        }
        .border_active{
            color:#FFFFFF;
            font-size:12px;
            background-color:#0065F0;
            height:28px;
            width:28px;
            text-align:center;
            border-radius:2px;
        }


        .box_1Name{
            color: #4A4A4A;
            width:60px;
            font-size:14px;
            font-weight:400;
            line-height:66px;
            padding-right: 5px;
        }

        .inputttt{
            margin-top:19px;
            width:230px;
            height:28px;
            background:rgba(255,255,255,1);
            border-radius:3px;
            border:1px solid rgba(244,244,244,1);
            color:rgba(204,204,204,1);
            font-size:12px;
        }

        .inputrenwu {
            padding-left: 11px;
            box-sizing: border-box;
            display: inline-block !important;
            width: 200px !important;
            height: 28px !important;
            outline: none;
            border-width: 0;
        }

        .inputtttImg{
            width: 16px;
            height: 16px;
            margin-top:6px;
            margin-left:5px;
        }


        .select {
            margin-right: 20px;
            width: 160px;
            height: 34px;
            border-radius: 3px;
            border: 1px solid #cccccc;
            display: flex;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 34px;
            color: #666666;
            font-size: 12px;
            position: relative;
        }

        .sanjiao_wrap {
            width: 32px;
            height: 32px;
            border-left: 1px solid #CCCCCC;
            /* border-radius: 3px; */
            position: absolute;
            right: 0;
            top: 0;
        }
        .sanjiao1 {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
        }
        .outerr,.outerr2,.outerr3{
            width: 120px;
            margin-top: 19px;
            margin-left: 20px;
            position: relative;
        }
        .selectttt1,.selectttt,.selectttt2{
            width: 120px;
            height: 28px;
            background: #FFFFFF;
            border-radius: 3px;
            border: 1px solid rgba(204, 204, 204, 0.2985);
        }
        .select-active{
            border:1px solid rgba(0,101,240,0.4);
            box-shadow:0px 0px 6px 0px rgba(0,101,240,0.6);
        }
        .line-active{
            border-right:1px solid rgba(0,101,240,0.4)!important;
        }
        .innerr,.innerr1,.innerr2{
            width:120px;
            margin-top:4px;
            background:#fff;
            box-shadow:0px 0px 6px 0px rgba(0,101,240,0.6);
            border-radius:3px;
            position: absolute;
        }
        .optionn{
            line-height:26px;
            padding-left:16px;
            font-size:12px;
            color:#999;

        }
        .optionn:hover{
          background:#0065F0;
          color:#fff;
        }
        .option-active{
            background:#0065F0;
            color:#fff;
        }

        .selecttttName {
            font-size: 12px;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 28px;
            background: #FFFFFF;
            margin-left: 8px;
            border-right:1px solid rgba(204, 204, 204, 0.2985);
        }

        /*.selectttt{*/
        /*margin-top:19px;*/
        /*margin-left:60px;*/
        /*width:120px;*/
        /*height:28px;*/
        /*background:#FFFFFF;*/
        /*border-radius:3px;*/
        /*border:1px solid rgba(204,204,204,0.2985);*/
        /*}*/

        .selecttttName,.selecttttName1,.selecttttName2{
            font-size:12px;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height: 28px;
            background:#FFFFFF;
            margin-left:5px;
        }

        .selecttttImg{
            width: 26px;
            height: 28px;

        }

        .selectttt22{
            margin-top:19px;
            margin-left:30px;
            width:68px;
            height:28px;
            background:dodgerblue;
            border-radius:3px;
            text-align: center;
            line-height:28px;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);
        }

        .selectttt3{
            margin-top:19px;
            width:100px;
            height:28px;
            background:rgba(0,101,240,1);
            border-radius:3px;
            text-align: center;
            line-height:28px;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);float: left;
        }
        .item4_middle {
            flex: 1;
            position: relative;
            display: flex;
        }
        .select {
            margin-right: 20px;
            width: 160px;
            height: 34px;
            border-radius: 3px;
            border: 1px solid #cccccc;
            display: flex;
            padding-left: 10px;
            box-sizing: border-box;
            line-height: 34px;
            color: #666666;
            font-size: 12px;
            position: relative;
        }
        .select .option {
            flex: 1;
        }
        .sanjiao_wrap {
            width: 32px;
            height: 32px;
            border-left: 1px solid #CCCCCC;
            /*border-radius:3px;*/
            position: absolute;
            right: 0;
            top: 0;
        }
        .sanjiao2 {
            display: block;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 8px;
            height: 8px;
            transform: translate(-50%, -50%);
        }
        .alloption {
            display: none;
            background: #ffffff !important;
            z-index: 999;
            padding-left: 0px;

            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 36px;
            border: 1px solid #eeeeee;
            height: auto;
            box-shadow:0px 0px 6px 0px rgba(0,101,240,0.6);
            width: 160px;
            overflow-y: scroll;
            max-height:256px;
        }
        .everyoption {
            text-indent: 10px;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            color: #999999;
        }
        .everyoption:hover{
            background: #0065F0;
            color: #ffffff;

        }
        .hidden{
            display: none
        }
    </style>
</head>
<body>
<div class="tt_top3">
    <div class="tt_top33">任务管理</div>
</div>
<div class="container">
    <div class="box">
        <form id="alls">
            <div class="box_1 flex-wrap">
                <div class="box_1Name">任务名称</div>
                <div class="inputttt flex-wrap">
                    <input type="text" class="inputrenwu" name="search[]" value="{$search.0?:''}" placeholder="搜索任务名称">
                    <img src="__IMG__/search.png" class="inputtttImg"/>
                </div>

                <div class="outerr">
                    <div class="selectttt flex-wrap">
                        <div class="selecttttName flex-con">{$search.1 ? $types[$search[1]]:'全部'}</div>
                        <img src="__IMG__/select.png" class="selecttttImg" onclick="selectclick(0)" />
                    </div>
                    <div class="innerr hidden" >
                        <div class="optionn {$search.1 ? '' : 'option-active'}" value="">全部</div>
                        <div class="optionn {$search.1==1 ? 'option-active' : ''}" value="1">下载</div>
                        <div class="optionn {$search.1==2 ? 'option-active' : ''}" value="2">求赞/求粉</div>
                        <div class="optionn {$search.1==3 ? 'option-active' : ''}" value="3">问卷</div>
                        <div class="optionn {$search.1==4 ? 'option-active' : ''}" value="4">投票</div>
                        <div class="optionn {$search.1==5 ? 'option-active' : ''}" value="5">观看视频</div>
                        <div class="optionn {$search.1==6 ? 'option-active' : ''}" value="6">分享</div>
                    </div>
                    <!--类型和状态塞值start-->
                    <input type="hidden" id="search1" name="search[]" value="{$search.1?:''}" />
                    <input type="hidden" id="search2" name="search[]" value="{$search.2?:''}" />
                    <input type="hidden" id="search3" name="search[]" value="{$search.3?:''}" />
                    <!--类型和状态塞值 end-->
                </div>
                <div class="outerr2">
                    <div class="selectttt1 flex-wrap">
                        <div class="selecttttName1 flex-con">{$search.2 ? $statuss[$search[2]]:'全部'}</div>
                        <img src="__IMG__/select.png" class="selecttttImg" onclick="selectclick(1)" />
                    </div>
                    <div class="innerr1 hidden" >
                        <div class="optionn {$search.2 ? '' : 'option-active'}" value="">全部</div>
                        <div class="optionn {$search.2==1 ? 'option-active' : ''}" value="1">上架</div>
                        <div class="optionn {$search.2==2 ? 'option-active' : ''}" value="2">下架</div>
                    </div>
                </div>
                <div class="outerr3">
                    <div class="selectttt2 flex-wrap">
                        <div class="selecttttName2 flex-con">{$search.3 ? $actsss[$search[3]]:'全部任务'}</div>
                        <img src="__IMG__/select.png" class="selecttttImg" onclick="selectclick(2)" />
                    </div>
                    <div class="innerr2 hidden" >
                        <div class="optionn {$search.3 ? '' : 'option-active'}" value="">全部任务</div>
                        <div class="optionn {$search.3==1 ? 'option-active' : ''}" value="1">普通任务</div>
                        <div class="optionn {$search.3==2 ? 'option-active' : ''}" value="2">活动任务</div>
                        <div class="optionn {$search.3==3 ? 'option-active' : ''}" value="3">达人任务</div>
                    </div>
                </div>
                <div class="selectttt22 hand_icon" id="search">搜索</div>
                <div class="flex-con"></div>
                <div class="selectttt3" onclick="gofabu(1);" style="cursor: pointer;margin-left: 10px">发布任务</div>
                <div class="selectttt3" onclick="gofabudaren();" style="cursor: pointer;margin-left: 10px">发布达人任务</div>
                <div class="selectttt3" onclick="gofabu(2);" style="cursor: pointer;margin-left: 10px">发布分步骤任务</div>
            </div>

        </form>
        <!--<div>-->
        <div class="box1" style="width: 100%;overflow-x: scroll;">
            <table style="width: 100%;overflow-x: scroll;">
                <tr>
                    <th>序号</th>
                    <th>任务包编号</th>
                    <th>任务名称</th>
                    <th>任务分类</th>
                    <th>任务类型</th>
                    <th>任务区域</th>
                    <th>单个任务金额/平台币</th>
                    <th>任务总金额/平台币</th>
                    <th>已完成任务数</th>
                    <th>任务总数</th>
                    <th>完成率</th>
                    <th>总到达率</th>
                    <th>总分享次数</th>
                    <th>任务状态</th>
                    <th>状态</th>
                    <th>拒绝理由</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
                {if condition="!$data->isEmpty()"}
                {foreach name="data" item="vo"}
                <tr>
                    <td>{:xuHao($key,$pages)}</td>
                    <td>{$vo.task_number?:''}</td>
                    <td>{$vo.task_name?:''}</td>
                    <td>
                        {if $vo.task_active==1}普通任务{/if}
                        {if $vo.task_active==2}活动任务{/if}
                        {if $vo.task_active==3}达人任务{/if}
                    </td>
                    <td>{$vo.task_type?:''}</td>
                    <td>{$vo.task_sheng?:''}</td>
                    <td>{$vo.task_price?:''}</td>
                    <td>{$vo.task_money?:''}</td>
                    <td>{$vo.task_done_num?:'0'}</td>
                    <td>{$vo.task_num?:''}</td>
                    <td>{$vo.complete?:''}</td>
                    <td>{$vo.task_share_click}</td>
                    <td>{$vo.task_share_num}</td>
                    <td>{$vo.task_status_str?:''}</td>
                    <td>
                        {if $vo.task_active <= 2}
                            {if $vo.task_active_status == 1}审核中{/if}
                            {if $vo.task_active_status == 2}已通过{/if}
                            {if $vo.task_active_status == 3}已拒绝{/if}
                        {/if}

                        {if $vo.task_active == 3}
                            {if $vo.task_super == 1}审核中{/if}
                            {if $vo.task_super == 2}已通过{/if}
                            {if $vo.task_super == 3}已拒绝{/if}
                        {/if}

                    </td>
                    <td>
                        {if $vo.task_active == 2 && $vo.task_active_status == 3}
                            {$vo.task_active_reason}
                        {elseif  $vo.task_active == 3 && $vo.task_super == 3}
                            {$vo.task_super_reason}
                        {else /}
                            -
                        {/if}

                    </td>
                    <td>{$vo.task_time?:''}</td>
                    <td>
                        <span class="name111" data-id="{$vo.task_id}" onclick="location.href = '/shop/Task/baseMessage?task_id='+{$vo.task_id};">详情</span>
                        {if $vo.task_status == 1 || $vo.task_status == 2}
                            {if $vo.task_active <= 2 && $vo.task_active_status != 1}
                            <span class="name111 bianji" data-id="{$vo.task_id}">编辑</span>
                            {/if}
                            {if $vo.task_active == 3 && $vo.task_super == 3}
                            <span class="name111 bianji" data-id="{$vo.task_id}">编辑</span>
                            {/if}
                            <span class="name111 xiajia" data-id="{$vo.task_id}">下架</span>
                        {/if}
                        {if $vo.task_status == 4}
                            <span class="name111 del" data-id="{$vo.task_id}">删除</span>
                        {/if}
                    </td>
                </tr>
                {/foreach}
                {else/}
                <tr>
                    <td colspan="13" style="text-align: center;">暂无数据 ！</span></td>
                </tr>
                {/if}

            </table>
        </div>
        <!--</div>-->
        <ul class="pagination flex-con" style="display: flex;justify-content: flex-end;">
            {$data->render()}
        </ul>
    </div>
</div>
</body>
{include file="public/footer"}
<script type="text/javascript" src="__JS__/api.js"></script>
<script type="text/javascript">
    /*发布任务*/
    function gofabu(type) {
        $.ajax({
            url: '/shop/Task/getShopSta',
            data: '',
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.status == 200){
                    window.location.href = '/shop/Task/releaseTask?type='+type;
                }else{
                    alert(returnData.msg);
                }
            },
            error: function () {
                alert('数据出错，请刷新重试');
            }
        })

    }
    function gofabudaren() {
        $.ajax({
            url: '/shop/Task/getShopSta',
            data: '',
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.status == 200){
                    window.location.href = '/shop/Task/releaseDarenTask';
                }else{
                    alert(returnData.msg);
                }
            },
            error: function () {
                alert('数据出错，请刷新重试');
            }
        })

    }
    /*编辑任务*/
    $(".bianji").click(function () {
        var id = $(this).attr('data-id');
        $.ajax({
            url: '/shop/Task/taskEditCan',
            data: 'id='+id,
            type: 'POST',
            dataType: 'JSON',
            success: function (returnData) {
                if(returnData.status == 200){
                    window.location.href = '/shop/Task/editTask?task_id='+id;
                }else{
                    alert(returnData.msg);
                }
            },
            error: function () {
                alert('数据出错，请刷新重试');
            }
        })

    });
    /*下架*/
    $(".xiajia").click(function () {
        if(confirm('确认下架吗？')){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '/shop/Task/offLine',
                data: 'task_id='+id,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        location.reload();
                    }
                },
                error: function () {
                    alert('数据出错，请刷新重试');
                }
            })
        }


    });
    /*删除*/
    $(".del").click(function () {
        if(confirm('确认删除吗？')){
            var id = $(this).attr('data-id');
            $.ajax({
                url: '/shop/Task/deleteTask',
                data: 'task_id='+id,
                type: 'POST',
                dataType: 'JSON',
                success: function (returnData) {
                    alert(returnData.msg);
                    if(returnData.status == 200){
                        location.reload();
                    }
                },
                error: function () {
                    alert('数据出错，请刷新重试');
                }
            })
        }


    });
    /*筛选*/
    $("#search").click(function () {
        var data = $("#alls").serialize();
        window.location.href = '/shop/Task/homePage?' + data;
    });
    //1、类型筛选
    $('.innerr .optionn').click(function () {
        var val = $(this).attr('value');
        var text = $(this).text();
        $('#search1').val(val);
        $('.selecttttName').text(text);
        if(!val){
            val = 0;
        }
        $('.innerr .optionn').eq(val).addClass('option-active').siblings().removeClass('option-active');
        selectclick(0);
    });
    //2、状态筛选
    $('.innerr1 .optionn').click(function () {
        var val = $(this).attr('value');
        var text = $(this).text();
        $('#search2').val(val);
        $('.selecttttName1').text(text);
        if(!val){
            val = 0;
        }
        $('.innerr1 .optionn').eq(val).addClass('option-active').siblings().removeClass('option-active');
        selectclick(1);
    });
    //3、来源筛选
    $('.innerr2 .optionn').click(function () {
        var val = $(this).attr('value');
        var text = $(this).text();
        $('#search3').val(val);
        $('.selecttttName2').text(text);
        if(!val){
            val = 0;
        }
        $('.innerr2 .optionn').eq(val).addClass('option-active').siblings().removeClass('option-active');
        selectclick(2);
    });












    var ishidden0 = false;
    var ishidden1 = false;
    var ishidden2 = false;
    function selectclick(num) {
        var ishidden = ishidden0;
        var ji = '';
        if(num == 1){
            ishidden = ishidden1;
            ji = '1';
        }
        if(num == 2){
            ishidden = ishidden2;
            ji = '2';
        }
        if (!ishidden) {
            $('.innerr'+ji).removeClass('hidden');
            $('.selectttt'+ji).addClass('select-active');
            $('.selectttt'+ji+' .selecttttName').addClass('line-active');
            if(num == 1){
                ishidden1 = true;
            }else if(num == 2){
                ishidden2 = true;
            }else{
                ishidden0 = true;
            }

        } else {
            $('.innerr'+ji).addClass('hidden');
            $('.selectttt'+ji).removeClass('select-active');
            $('.selectttt'+ji+' .selecttttName').removeClass('line-active');
            if(num == 1){
                ishidden1 = false;
            }else if(num == 2){
                ishidden2 = false;
            }else{
                ishidden0 = false;
            }

        }
    }
</script>
